<template>
  <div>
    <h2 class="big-title">
      入库单列表
      <div>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="$router.push({name:'generalStockInOrderBack'})"
        >领料退回</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="$router.push({name:'generalStockInOrder'})"
        >入库收货</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="$router.push({name:'generalStockInOrderCheck'})"
        >入库验收</el-button>
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="$router.push({name:'generalStockInOrderPutaway'})"
        >入库上架</el-button>
      </div>
    </h2>
    <br>
    <br>
    <el-input placeholder="请输入内容" v-model="seachText" class="input-with-select">
      <el-button slot="append" icon="el-icon-search" @click="handleClick"></el-button>
    </el-input>
    <br>
    <br>
    <hr>
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column prop="orderNo" label="单号" sortable width="230">
        <template slot-scope="scope">
          <span>{{scope.row.orderNo}}</span> &nbsp;
          <el-tag size="mini" v-if="scope.row.deleted === true " type="danger">不可用</el-tag>
          <el-tag size="mini" v-else type="success">可用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="preOrderNo" label="前置单号" sortable width="110"></el-table-column>
      <el-table-column prop="preOrderType" label="前置单据类型" width="110">
        <template slot-scope="scope">
          <span>{{setOrderType(scope.row.preOrderType)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="factory.name" label="收货工厂" width="230"></el-table-column>
      <el-table-column prop="status" label="状态" sortable width="80">
        <template slot-scope="scope">
          <span>{{setStatus(scope.row.status)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="vendorCode" label="供应商代码" sortable width="130"></el-table-column>
      <el-table-column prop="vendorName" label="供应商名称" sortable></el-table-column>
      <el-table-column prop="createdBy" label="创建人" sortable></el-table-column>
      <el-table-column prop="createdDate" label="创建时间" sortable>
        <template slot-scope="scope">
          <span>{{scope.row.createdDate.replace(/T.*/, '')}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="small" icon="el-icon-view" @click="openBook(scope.row)">查看</el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            @click="openEditor(scope.row)"
          >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <br>
    <el-pagination
      background
      layout="total, prev, pager, next, jumper"
      :total="totalNumber"
      @current-change="currentChange"
    ></el-pagination>
    <!-- 分割线 ---------------------->
    <el-dialog
      :title="'单号: ' +outerTitle +' 详情'"
      :visible.sync="outerVisible"
      :lock-scroll="false"
      top="60px"
      width="80%"
    >
      <div class="text-right">
        <el-popover placement="top" width="160" v-model="buttonVisible">
          <p>操作将会改变状态,确定此操作?</p>
          <div style="text-align: right; margin-right: 10px">
            <el-button size="mini" type="text" @click="buttonVisible = false">取消</el-button>
            <el-button type="primary" size="mini" @click="configState">确定</el-button>
          </div>
          <el-button
            slot="reference"
            :type="formInline.deleted ? 'success' : 'danger'"
            :icon="formInline.deleted ? 'el-icon-delete' : 'el-icon-delete'"
          >设置为{{formInline.deleted ? '可用' : '不可用'}}</el-button>
        </el-popover>&nbsp;
        <el-button type="warning" icon="el-icon-share">冲销</el-button>
      </div>
      <el-form label-position="top">
        <el-row :gutter="15">
          <el-col :span="4">
            <el-form-item label="单号:">
              <el-input max="10" disabled :value="formInline.orderNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="前置单号:">
              <el-input max="10" disabled :value="formInline.preOrderNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="前置单据类型:">
              <el-input max="10" disabled :value="setOrderType(formInline.preOrderType)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="收货工厂:">
              <el-input max="10" disabled :value="formInline.factory&&formInline.factory.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态:">
              <el-input max="10" disabled :value="setStatus(formInline.status)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="供应商代码:">
              <el-input max="10" disabled :value="formInline.vendorCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="4">
            <el-form-item label="供应商名称:">
              <el-input max="10" disabled :value="formInline.vendorName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="创建人:">
              <el-input max="10" disabled :value="formInline.createdBy"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="创建时间:">
              <el-input max="10" disabled :value="formInline.createdDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否可用:">
              <el-input max="10" disabled :value="formInline.deleted ? '不可用' : '可用'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货人签字:">
              <template v-if="formInline.receiptSignatures&&formInline.receiptSignatures.length">
                <span v-for="(itme,index) in formInline.receiptSignatures" :key="index">
                  <el-button size="small" @click="openImage(itme)">{{itme.title}}</el-button>
                </span>
              </template>
              <template v-else>
                <el-button size="small">无签字</el-button>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <h4 class="lin-h4">行项目</h4>

      <el-table :data="itemTable" style="width: 100%">
        <el-table-column label="行项目号" prop="preOrderItemNo"></el-table-column>
        <el-table-column label="申请人" prop="applicat"></el-table-column>
        <el-table-column label="单位" prop="unit"></el-table-column>
        <el-table-column label="SAP库存地" prop="'***'"></el-table-column>
        <el-table-column label="收货数量" prop="receiptQuantity"></el-table-column>
        <el-table-column label="验收数量" prop="acceptanceQuantity">
          <template slot-scope="scope">
            <span>{{scope.row.acceptanceQuantity?scope.row.acceptanceQuantity:'无'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="入库数量" prop="stockInQuantity">
          <template slot-scope="scope">
            <span>{{scope.row.stockInQuantity?scope.row.stockInQuantity:'无'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="物料编码" prop="material.code"></el-table-column>
        <el-table-column label="物料名称" prop="material.name"></el-table-column>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="移动类型">
                <span>{{ props.row.preOrderItemNo }}</span>
              </el-form-item>
              <el-form-item label="物料编号">
                <span>{{ props.row.applicat }}</span>
              </el-form-item>
              <el-form-item label="物料描述">
                <span>{{ props.row.unit }}</span>
              </el-form-item>
              <el-form-item label="验收签名">
                <template
                  v-if="props.row.acceptanceSignatures&&props.row.acceptanceSignatures.length"
                >
                  <span v-for="(itme,index) in props.row.acceptanceSignatures" :key="index">
                    <el-button size="small" @click="openImage(itme)">{{itme.title}}</el-button>
                  </span>
                </template>
                <template v-else>
                  <el-button size="small">无签字</el-button>
                </template>
              </el-form-item>
              <el-form-item label="上架签名">
                <template v-if="props.row.inSignatures&&props.row.inSignatures.length">
                  <span v-for="(itme,index) in props.row.inSignatures" :key="index">
                    <el-button size="small" @click="openImage(itme)">{{itme.title}}</el-button>
                  </span>
                </template>
                <template v-else>
                  <el-button size="small">无签字</el-button>
                </template>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
      </el-table>

      <!-- 查看签名img -->
      <el-dialog width="60%" :visible.sync="innerVisible" append-to-body>
        <el-image :src="srcUrl" fit="fit"></el-image>
      </el-dialog>
    </el-dialog>
    <!-- 编辑的dialog -->
    <el-dialog
      :title="'单号: ' +outerTitle +' 编辑入库单'"
      :visible.sync="outerVisibleBook"
      :lock-scroll="false"
      top="60px"
      width="80%"
    >
      <el-form label-position="top">
        <el-row :gutter="15">
          <el-col :span="4">
            <el-form-item label="单号:">
              <el-input max="10" disabled :value="formInline.orderNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="前置单号:">
              <el-input max="10" disabled :value="formInline.preOrderNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="前置单据类型:">
              <el-input max="10" disabled :value="setOrderType(formInline.preOrderType)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="收货工厂:">
              <el-input max="10" disabled :value="formInline.factory&&formInline.factory.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态:">
              <el-input max="10" disabled :value="setStatus(formInline.status)"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="供应商代码:">
              <el-input max="10" disabled :value="formInline.vendorCode"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="4">
            <el-form-item label="供应商名称:">
              <el-input max="10" disabled :value="formInline.vendorName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="创建人:">
              <el-input max="10" disabled :value="formInline.createdBy"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="创建时间:">
              <el-input max="10" disabled :value="formInline.createdDate"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="是否可用:">
              <el-input max="10" disabled :value="formInline.deleted ? '不可用' : '可用'"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收货人签字:">
              <template v-if="formInline.receiptSignatures&&formInline.receiptSignatures.length">
                <span v-for="(itme,index) in formInline.receiptSignatures" :key="index">
                  <el-button size="small" @click="openImage(itme)">{{itme.title}}</el-button>
                </span>
              </template>
              <template v-else>
                <el-button size="small">无</el-button>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <h4 class="lin-h4">行项目</h4>

      <el-table :data="itemTable" style="width: 100%">
        <el-table-column label="行项目号" prop="preOrderItemNo"></el-table-column>
        <el-table-column label="申请人" prop="applicat">
          <template slot-scope="scope">
            <el-input
              v-model="formItem['applicat'+scope.row.id]"
              :placeholder="scope.applicat"
              :value="formItem['applicat'+scope.row.id]"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit"></el-table-column>
        <el-table-column label="SAP库存地" prop="stockLocation">
          <template slot-scope="scope">
            <el-input v-model="formItem.stockLocation" :placeholder="scope.stockLocation"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="收货数量" prop="receiptQuantity"></el-table-column>
        <el-table-column label="验收数量" prop="acceptanceQuantity">
          <template slot-scope="scope">
            <span>{{scope.row.acceptanceQuantity?scope.row.acceptanceQuantity:'无'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="入库数量" prop="stockInQuantity">
          <template slot-scope="scope">
            <span>{{scope.row.stockInQuantity?scope.row.stockInQuantity:'无'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="物料编码" prop="material.code"></el-table-column>
        <el-table-column label="物料名称" prop="material.name"></el-table-column>
      </el-table>
      <br>
      <br>
      <el-row type="flex" justify="center">
        <el-col :span="2">
          <el-button type="primary">保&nbsp;存</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getstockInOrders,
  stockInOrdersWebDisabled,
  getstockInOrdersId,
} from '@/api/putInStorage';
// import { setStatus, setOrderType } from '@/util/fieldConfig.js';
import * as baseConfigFn from '@/util/fieldConfig.js';

export default {
  name: 'stockInOrder',
  components: {},
  data() {
    return {
      srcUrl: '',
      buttonVisible: false,
      loading: true,
      formItem: {
        applicat: '',
        kecundi: '',
      },
      itemTable: [], // 详情后的table
      formInline: {}, // 点击的当前行 所有数据
      outerTitle: '',
      outerVisibleBook: false, // 编辑的
      outerVisible: false, // 第一层
      innerVisible: false,
      seachText: '',
      tableData: [],
      totalNumber: 0,
    };
  },
  created() {
    this.ininTableData();
  },
  computed: {
    // ...mapState({ token: state => state.user.token }),
  },
  methods: {
    ...baseConfigFn, // 都需要用的 字段转换
    openImage(item) {
      this.srcUrl = `http://10.229.255.52:8090/api/getImageByPath?path=${
        item.fileUrl
      }`;
      this.innerVisible = true;
      console.log(item, '打开图片', this.srcUrl);
    },
    ininTableData(searchKey = '', page = 0, size = 10) {
      const data = {
        searchKey,
        page,
        size,
        sort: 'createdDate,desc',
      };
      if (!searchKey.length) delete data.searchKey;
      getstockInOrders(data).then(res => {
        this.tableData = res.data;
        this.totalNumber = Number(res.headers['x-total-count']);
        this.loading = false;
      });
    },
    handleClick() {
      this.loading = true;
      this.ininTableData(this.seachText);
      this.seachText = '';
    },
    currentChange(page) {
      this.loading = true;
      this.ininTableData('', page - 1);
    },
    openBook(row) {
      const data = {
        id: row.id,
      };
      getstockInOrdersId(data).then(res => {
        console.log('getstockInOrdersId');
        if (res.status === 200) {
          console.log(row.id, res.data.receiptSignatures);
          this.formInline = res.data;
          this.itemTable = res.data.orderItems;
          this.outerTitle = res.data.orderNo;
          this.outerVisible = true;
        }
      });
    },
    openEditor(row) {
      this.formInline = row;
      this.itemTable = row.orderItems;
      this.outerTitle = row.orderNo;
      // 动态绑定 model
      this.itemTable.forEach(item => {
        if (!this.formItem[`applicat${item.id}`]) {
          this.$set(this.formItem, `applicat${item.id}`, '');
          this.$set(this.formItem, `applicat${item.id}`, '');
        }
      });
      this.outerVisibleBook = true;
    },
    configState() {
      const data = {
        id: this.formInline.id,
        deleted: !this.formInline.deleted,
      };
      stockInOrdersWebDisabled(data).then(res => {
        console.log(res);
        if (res.success) {
          this.formInline.deleted = !this.formInline.deleted;
          // this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
      this.buttonVisible = false;
    },
  },
};
</script>
